<template>
    <div class="container">
        <div class="row">

            <div class="col-md-8 col-md-offset-2" >


                <li class="list-group-item" style="border: 0px">

                    <h3 class="wl_title">{{post.title}}</h3>

                    <div v-if="isauthor ==true">
                    <a class="label label-info" href="/post/1/edit">修改</a>

                    <a class="label label-danger delete" id="delete1" href="/post/1/delete">删除</a>

                    </div>
                    <br>
                    <span style="font-size: 20px"><a href=""></a> </span><span></span>
                    <p class="wl_context" style="padding-top: 20px" v-html="post.content"></p>
                    <br>




                    <div class="row">
                        <button type="button" v-if="iszan ==true"
                                style="color: orange"
                                class="btn btn-default btn-lg zan"
                                @click="wl_uzan()"
                        >
                            <span class="glyphicon glyphicon-thumbs-up "></span> <span class="zhi">取消赞</span>

                        </button>

                        <button type="button"
                                v-if="iszan ==false"
                                style="color: orange" class="btn btn-default btn-lg zan" 
                                @click="wl_zan()">
                            <span class="glyphicon glyphicon-thumbs-up"></span> 
                            <span class="zhi">赞</span>


                        </button>
                    </div>


                </li>





<!--//评论的模块-->
                <wl-comment :todos="comments"></wl-comment>
            </div>
<!-- 评论的 -->


  




        </div>





    </div>
</template>
<style type="text/css">
    

  .wl_context img{
        width: 100%;
        height: 100%;
    }

/*标题和内容的自动换行*/
    .wl_context{
        word-wrap:break-word; overflow:hidden;
    }
    .wl_title{
     word-wrap:break-word; overflow:hidden;   
    }
</style>

<script>
    import WlComment from './comment.vue';
 import conf from '../layout/conf.vue';//引用模块进来

    export default {
        mounted() {
            console.log("开始加载展示!");
            this.id=this.$route.params.id;

            this.axios.get(this.url+"id="+this.id).then(response=>{
                console.log(response);
                // console.log(response['data']['data']['comments']);
                this.post=response.data[0];
                // this.comments=response['data']['data']['comments'];
                // this.list=response.data.data[0];

            })

               var access_token=this.GetCookie("wlphp.cn");

               if(access_token!="" || access_token!=null){
                         this.id=this.$route.params.id;
                       var params = new URLSearchParams();
                        params.append('post_id', this.id);
                        var access_token=this.GetCookie("wlphp.cn");
                        params.append('token', access_token);

                           this.axios.post(this.iszanurl,params).then(response=>{
                            console.log(response);
                            if(response['data']['status']=="error"){
                                // console.log(response);
                                   // this.message("no","发生异常!");
                                            
                            }else{
                                
                                var iszan=response['data']['message'];
                                if(iszan=="赞过了"){
                                    this.iszan=true;
                                }else{
                                    this.iszan=false;
                                }
                            }
                           

                        })

               }
                // params.append('access_token', access_token);

        },
        data(){
            return {
                post: {},
                comments:[],
                
                 url:conf.url+"/index/post/show/",
                 posturl:conf.url+"/index/zan/zan/",
                 postuzanurl:conf.url+"/index/zan/uzan/",
                 iszanurl:conf.url+"/index/zan/is_zan/",
                id:"",
                iszan:false,    //是否赞
                isauthor:false, //是否是作者
                zancontext:"赞",

            }


        },

         components:{
             WlComment
            },

            methods:{
                wl_zan(){
                        this.id=this.$route.params.id;
                       var params = new URLSearchParams();
                        params.append('post_id', this.id);
                        var access_token=this.GetCookie("wlphp.cn");
                        params.append('token', access_token);
                        
                       this.axios.post(this.posturl,params).then(response=>{
                        console.log(response);
                    if(response['data']['status']=="error"){
                       
                        this.$layer.msg(response['data']['message']);

                        this.iszan=false;
                                    
                    }else{
                        
                        this.$layer.msg(response['data']['message']);
                        this.iszan=true;
                    }
                   

                      })
                    },



                    wl_uzan(){
                        this.id=this.$route.params.id;
                       var params = new URLSearchParams();
                        params.append('post_id', this.id);
                        var access_token=this.GetCookie("wlphp.cn");
                        params.append('token', access_token);
                    
                   this.axios.post(this.postuzanurl,params).then(response=>{
                if(response['data']['status']=="error"){
                        // this.iszan=true;
                        this.$layer.msg(response['data']['message']);        
                }else{
                        this.$layer.msg(response['data']['message']);
                        this.iszan=false;
                }
               

                  })
                }

            }


    }
</script>
